<template>
  <el-dialog :title="'2021年上半年奖励'" :close-on-click-modal="false" :visible.sync="visible"
             @close="clearDataList()" width="85%" top="8vh">
    <div style="height: 70vh; overflow-y: auto; padding: 0 10px;">
      <el-card class="" style="margin-right: 10px;">
        <div slot="header">
          <span class="blue">分配概况</span>
          奖金总额：{{ jiangJinZe() }}元
        </div>
        <el-col :span="12">
          <div id="total" style="width:99%;height:300px;"></div>
        </el-col>
        <el-col :span="12">
          <div id="ass" style="width:99%;height:300px;"></div>
        </el-col>
      </el-card>

      <el-card class="box-card mb10" style="margin-right: 10px;">
        <div slot="header" class="clearfix">
          <span class="blue">分配详情</span>
        </div>
        <el-table :data="dataForm" stripe border width="99%" height="35vh" class="avue-crud mb10">
          <el-table-column type="index" width="80" header-align="center" align="center" label="序号"></el-table-column>
          <el-table-column prop="jg" label="机构" header-align="center" align="center"></el-table-column>
          <el-table-column prop="je" label="金额（元）" header-align="center" align="center"></el-table-column>
          <el-table-column prop="rjJe" label="人均金额（元）" header-align="center" align="center"></el-table-column>
        </el-table>
      </el-card>

      <!--      <span slot="footer" class="dialog-footer">-->
      <!--        <el-button @click="clearDataList" type="primary" plain>关闭</el-button>-->
      <!--      </span>-->
    </div>
    <div style="display: flex;width: 50%;justify-content: space-around;margin: 0 auto">
      <el-button @click="tg()" type="primary" style="width: 150px">通过</el-button>
      <el-button @click="clearDataList" type="primary" style="width: 150px">退回</el-button>
    </div>


  </el-dialog>
</template>

<script>
import {getObj} from '@/api/jiangjin/jiangjinfpjjgrfppzmxb'
import {getGrjcByFfid} from '@/api/jiangjin/jiangjingrjcjlb'
import * as echarts from "echarts";

export default {
  name: "fppzmxbDetail",
  data() {
    return {
      visible: false,
      dataList: [],
      dataForm: [
        {
          jg: '西安中心',
          je: 130000,
          rjJe: 2000
        },
        {
          jg: '成都中心',
          je: 14000,
          rjJe: 2500
        },
        {
          jg: '大庆中心',
          je: 100000,
          rjJe: 1300
        },
        {
          jg: '北京业务部',
          je: 200000,
          rjJe: 2000
        },
        {
          jg: '天津业务部',
          je: 500000,
          rjJe: 2000
        },
        {
          jg: '吉林业务部',
          je: 150000,
          rjJe: 1800
        },
      ],
      show: false
    }
  },
  methods: {
    //初始化
    init(id) {
      this.show = true;
      this.$nextTick(() => {
        this.$nextTick(() => {
          setTimeout(() => {
            this.loadTotal(this.dataForm);
            this.loadAss(this.dataForm);
          }, 100)
        })
      })
      this.visible = true;
    },
    //通过
    tg() {
     //console.log('通过');
    },
    //奖金总额
    jiangJinZe() {
      let jjZe = 0;
      for (let i in this.dataForm) {
        jjZe += this.dataForm[i].je;
      }
      return jjZe;
    },
    //人均金额平均值
    jiangjinRjJePjz() {
      let num = 0;
      for (let i in this.dataForm) {
        num += this.dataForm[i].rjJe;
      }
      if (this.dataForm.length != 0 && this.dataForm != null) {
        num /= this.dataForm.length;
      }
      return num;
    },
    //饼图
    loadTotal(total) {
      //var colors = ["#da4996", "#6cb7b3", "#f1c51e", "#d2c72d", "#7a8c62", "#cdafb1", "#8bc561", "#c45c81", "#6882bf", "#4f5a89"];
      var colors = ["#e4402f", "#f68628", "#fbb428", "#b5ce33", "#38cc7f", "#1dc7ac", "#22aecb", "#04689a", "#683c93", "#9a3578","#ae2954"];
      var vo = [{
        value: 0,
        name: "暂无数据",
      }];
      if (total.length > 0) {
        vo = [];
      }
      for (var i = 0; i < total.length; i++) {
        vo.push({
          value: total[i].je,
          name: total[i].jg,
        });
      }
      var chartDom = document.getElementById('total');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: '机构分配环形图',
          x: 'left',
          y: 'top',
        },
        tooltip: {
          trigger: 'item'
        },
        series: [{
          name: '分类奖金项',
          type: 'pie',
          radius: ['40%', '75%'],
          avoidLabelOverlap: false,
          itemStyle: {

            normal: {
              borderRadius: 10,
              borderWidth: 2,
              color: function (params) {
                return colors[params.dataIndex % 10];
              }
            },
          },
          data: vo,
          label: { //去除饼图的指示折线label
            normal: {
              show: true,
              // position: 'inside',
              formatter: "{b}:{c}"
            },
          },
          labelLine: {show: true}
        }]
      };
      option && myChart.setOption(option);
    },
    //柱状图
    loadAss(ass) {
      let pjz = this.jiangjinRjJePjz();
      let pjzList = [];
      for (let i in this.dataForm) {
        pjzList.push(pjz);
      }
      //var colors = ["#efa832", "#c44393", "#6d60a8", "#782e8f", "#134665", "#ccdac1", "#82c9c1", "#dc609f", "#6d8bb1", "#78511e"];
      var colors = ["#e4402f", "#f68628", "#fbb428", "#b5ce33", "#38cc7f", "#1dc7ac", "#22aecb", "#04689a", "#683c93", "#9a3578","#ae2954"];
      var names = ["暂无数据"];
      var voValues = [0];
      if (ass.length > 0) {
        names = [];
        voValues = [];
      }
      for (var i = 0; i < ass.length; i++) {
        names.push(ass[i].jg);
        voValues.push(ass[i].rjJe);
      }
      var chartDom = document.getElementById('ass');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: '人均金额',
          x: 'left',
          y: 'top',
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: names,
          axisLabel: {
            interval: 0,
            rotate: -30
          }
        },
        grid: {
          y2: 140
          // left: '18%',
          // right: '4%',
          // bottom: '3%',
        },
        yAxis: {
          type: 'value',
          // minInterval: 1,
        },
        series: [{
          name: '人均金额',
          label: {
            show: true,
            formatter: '{c}',
            position: 'top'
          },
          itemStyle: {
            normal: {
              color: function (params) {
                return colors[params.dataIndex % 10];
              },
            },
          },
          markLine: {
            symbol: 'none',
            data: [
              {
                type: 'average', name: "控制线",
                lineStyle: {
                  normal: {
                    //color: '#91cc75',
                    color: '#fcd47e',
                    width: 3,
                    type: 'solid'
                  }
                },
              },
            ]
          },
          data: voValues,
          type: 'bar',
        },
          // {
          //   name: '控制线',
          //   type: 'line',
          //   symbol: 'rect',
          //   smooth: 'true',
          //   symbolSize: 0,
          //   showSymbol: 'false',
          //   lineStyle: {
          //     normal: {
          //       width: 3,
          //     }
          //   },
          //   data: pjzList,
          //
          // },
        ]
      };
      option && myChart.setOption(option);
    },
    //取消
    clearDataList() {
      this.dataList = [];
      this.visible = false;
    },
  }
}
</script>

<style scoped>

</style>
